<title>{{title}}</title>
<div class="layout-container layout-column">
    <div class="layout-main mb4j-padding-all">
        <i-form action="/api/account/add" method="post" label-position="left" :label-width="120">
            <form-item :label="account.label">
                <i-input type="text" name="account" :placeholder="account.placeholder" 
                	valid="required:true,max:50,ajax:{link:'/api/account/validateAccountAdd', name:'account'}" 
                	:label="account.label"
                	:errors="account.errors"></i-input>
            </form-item>
            <form-item :label="displayName.label">
            	<i-input 
            		type="text" name="displayName" 
            		:placeholder="displayName.placeholder" 
	        		valid="required:true,max:50" :label="displayName.label">
               </i-input>
            </form-item>
            <form-item :label="password.label">
                <i-input :type="password.type" name="password" 
	        		:placeholder="password.placeholder"  
	        		valid="required:true,max:32" :label="password.label" 
	        		icon="ios-eye-outline" @on-click="changePassworeType">
	        	</i-input>
            </form-item>
            <form-item :label="status.label">
            	<i-switch v-model="status.value" size="large" name="status" true-value="1" false-value="0">
            		<span slot="open">{{status.on}}</span>
        			<span slot="close">{{status.off}}</span>
            	</i-switch>
            </form-item>
            <form-item :label="memo.label">
                <i-input type="textarea" name="memo" 
                	:placeholder="memo.placeholder" rows="3"
	            	valid="max:100" :label="memo.label"></i-input>
            </form-item>
        </i-form>
    </div>
    <div class="layout-footer">
        <i-button v-on:click="reset">{{button.reset}}</i-button>
        <i-button type="primary" v-on:click="submit">{{button.submit}}</i-button>
    </div>
</div>